基礎繪圖模式指令介紹

物聯網設備放置在現場環境，如果工作人員需要進行設定調整、或是需要手動輸入一些值，就需要有基礎的應用軟體介面與繪圖指令。這些工具將提供程式開發者，一定程度的便利性，避免手工逐點繪製，增加開發困難度。另外，由於物聯網設備的運算資源較一般電腦要稀缺，所以繪圖公用函式庫的執行效能就相當重要。在玩學機的基礎繪圖指令，就是利用C語言編寫底層繪圖功能函數，再打包成可被 micropython 使用者直接呼叫使用的函式庫，讓開發者可以專注在開發應用介面。

• wb.cls([color]) 清除 LCD 螢幕畫面
• wb.box(x, y, w, h, color) 在 LCD 上畫出一個實心的彩色方塊
• wb.line(x1, y1, x2, y2, color[, width]) 在 LCD 上畫出一條彩色的線
• wb.circle(x, y, r, color, [, width]) 在 LCD 上畫一個彩色的空心圓
• wb.pix(x, y, color) 在 LCD 上畫一個彩色的點
• wb.win(x1, y1, x2, y2) 設定一個可填色的範圍(自動換行)
• wb.pushpix(color) 在一個範圍內自動填色
• wb.str(str, x, y[, font[, size]]) 在 LCD 上顯示一個彩色的字符符號
• wb.colors(color1, color2) 設定文字字串顏色
• wb.img(x, y, w, h, buffrt) 將一個bytearray 的圖像快速顯示出來
• wb.showbuf(buffer) 將一個全螢幕的bytearray 圖像快速顯示出來
• wb.showjpg(file) 將一個全螢幕的 JPEG 圖檔快速顯示出來
• wb.showbmp(file) 將一個全螢幕 16bits BMP 格式圖像快速顯示出來

畫點、畫線與畫圖

範例一: 畫點與畫線標示螢幕重要位置

1. 在螢幕左上角畫一個 10x10 大小的粉紅色方塊
2. 在螢幕中心點為起始點，畫一個長寬50 點的黃色方塊
3. 以(10, 10) 為起始點，(64, 60) 為終點，畫一條 藍色的線段，將兩個方形連起來。
4. 以(10, 10) 為起始點，(114, 60) 為終點，畫一條綠色的線段，寬度為3。
5. 以(32, 90) 為圓心，畫一個半徑5點，線段顏色為紅色，線段粗細為2的圓。
6. 在 (32, 90) 畫一個白色的點

wb.cls()
wb.box(-10, -10, 20, 20, wb.PINK)
wb.box(64, 60, 50, 50, wb.YELLOW)
wb.line(10, 10, 64, 60,  wb.BLUE)
wb.line(10, 10, 114, 60,  wb.GREEN, 3)
wb.circle(32, 90, 5, wb.RED, 2)
wb.pix(32, 90, wb.WHITE)

範例二: 畫出隨機顏色的線條

wb.cls()
while True:
    x1 = wb.rand(160)
    y1 = wb.rand(128)
    x2 = wb.rand(160)
    y2 = wb.rand(128)
    color = wb.rand(65536)
    width = wb.rand(1, 3)
    wb.line(x1, y1, x2, y2, color, width)

範例三: 在指定範圍填入隨機顏色

wb.cls()
wb.win(0, 0, 100, 100)
colorArray = [wb.YELLOW, wb.GREEN, wb.RED, wb.PINK]
for i in range(10000):
    wb.pushpix(colorArray[i%4])

範例四: 做一個往右移動的方塊

# 作一個 10x10 圖塊，共計 100 點，需要200 bytes，因為每個點的顏色都是2 bytes
wb.cls()
image = bytearray([wb.RED for i in range(200)])
for i in range(100):
	wb.img(i, 10, 10, 10, image) # 向右移動顯示
	time.sleep(0.05)
	wb.box(i, 10, 10, 10, 0)	 	# 清除方塊

顯示圖檔介紹

Micropython 要顯示圖檔需要注意幾個地方，請按照下面的步驟處理您的圖片:

1. 將您的圖案轉換成 160 X 128 大小的圖形，可用軟體轉檔，維持圖片比例。
2. 利用轉檔程式，轉換成C格式的點陣檔。
3. 將此檔案透過檔案管理系統上傳到玩學機。
4. 使用 wb.showbmp(您的圖檔) 顯示在螢幕指定位置。

先準備 160 X 128 大小的圖形。

利用轉檔工具，將圖片轉換成玩學機可以支援的資料結構。請使用這個網頁工具 https://lvgl.io/tools/imageconverter 轉檔，相關參數請參考下圖。

要注意兩個標籤上的檔名，「showGraphic.py」代表檔案是存在本機電腦上，而我們要執行讀入玩學機上的圖檔並顯示，因此需要程式碼也上傳到玩學機。「[showGraphic.py]」則代表這是存在玩學機上的程式碼。

wb.cls()
f = open("DDLABWiFiBoy_Logo.bin", "rb")
data = bytearray(f.read())
wb.showbuf(data)
f.close()

程式執行結果:

今天又學到很多範例。明天我們將講解「Micropython 內建函數與模組簡介」，明天見。